<template>
  <div class="warp container">
    <router-link :to="{path:'/'}" class="skip"></router-link>

    <div class="select-box" :class="active == null ? '' : 'selected'">
        <h3>请选择你的性别</h3>
        <p>我们将根据你的偏好推荐好书</p>
        <div class="gender-box">
            <div class="item" :class="active == 1 ? 'active' : ''" @click="setActive(1)">
                <img src="../assets/images/men_icon.png">
                <p>男生</p>
            </div>
            <div class="item" :class="active == 2 ? 'active' : ''" @click="setActive(2)">
                <img src="../assets/images/women_icon.png">
                <p>女生</p>
            </div>
        </div>
    </div>
  </div>
</template>
<script>

    export default {
        name: 'selectGender',
        components: {

        },
        data () {
            return {
                active:null
            }
        },
        created(){

        },
        mounted(){

        },
        methods:{
            back(){
                this.$router.go('-1')
            },
            setActive(val){
                if(this.active != null)return false;
                this.active = val;

                this.$axios.post(
                    this.$store.state.url+"add_user?device_sn="+this.$store.state.device,
                    {device_sn:this.$store.state.device,add_user:val}).then(res=>{
                      console.log(res.data);
                      if(res.data.code == 1){
                            localStorage.setItem("gender",val);
                            setTimeout(()=>{
                                this.$router.push({ path: '/'})
                            },500)
                      }else{
                            Toast({
                                message: res.data.msg,
                                position: 'middle',
                                duration: 1000
                            });
                      }
                });


            }
        }
    }
</script>
<style lang="scss" scoped>
    .container{
        height:100vh;
        overflow:hidden;
        background-color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .skip{
        position: absolute;
        top:30px;
        right:30px;
        width:79px;
        height:28px;
        background:url(../assets/images/icon/skip_icon.png) no-repeat 0 0/100% auto;
        z-index:1;
    }
    .select-box{
        color:#222222;
        text-align: center;
        &.selected{
            color:#9a9a9a;
            .item{
                img{
                    opacity:0.5;
                }
            }
        }
        h3{
            font-size:28px;
            font-weight: normal;
        }
        p{
            font-size:26px;
            margin-top:30px;
        }
        .gender-box{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top:70px;
            .item{
                margin:0 55px;
                width:200px;
                position: relative;
                &.active{
                    img{
                        opacity:1;
                    }
                    &:after{
                        content:'';
                        position: absolute;
                        top:0;
                        right:0;
                        width:48px;
                        height:48px;
                        background:url(../assets/images/selected_icon.png) no-repeat 0 0/100% auto;
                    }
                }
                p{
                    margin-top:30px;
                    font-size:26px;
                    color:#222222;
                }
            }
        }
    }
</style>
